import {
  ProFormText,
  ProForm,
  ProFormTextArea,
  ProFormItem,
  ProFormDependency,
  ProFormDigit,
} from '@ant-design/pro-components';
import type { ProFormInstance } from '@ant-design/pro-components';
import 'braft-editor/dist/index.css';
import Editor from './Editor';

import getProFileData from '../getProFileData';
import Config from '../configGroup';
import styles from './style.less';

type Props = {
  isModify?: boolean;
  isRead?: boolean;
  formRef: ProFormInstance | any;
};

const MemberInfo: React.FC<Props> = ({ isModify, isRead, formRef }) => {
  //   const formInstance = ProForm.useFormInstance();
  // const dispatch = useDispatcher();
  const { formValue } = getProFileData();
  // const [optionsPlaceChannelList, setOptionsPlaceChannelList] = useState([] as API.OptionsKeys[]); // 平台--枚举
  // 监听发放平台--变化--联动
  // useEffect(() => {
  //   if (formValue.placeChannelName) {
  //   }
  // }, [formValue.placeChannelName]);

  // 枚举值查询
  // useEffect(() => {
  //   dispatch('queryOptionsKeys');
  // }, []);

  return (
    <Config.Group id="member-info" title="商城及会员卡包信息">
      <div className={styles['wrap-body']}>
        <ProForm.Group>
          <ProFormText
            labelCol={{ span: 8 }}
            width={700}
            name="useRuleCode"
            label="券小标题"
            placeholder="useRuleCode"
          />
          {/* 占位 */}
          <div style={{ width: 500 }} />
          <ProFormText
            labelCol={{ span: 8 }}
            width="lg"
            name="couponValue"
            label="券积分面额"
            placeholder="couponValue"
          />
          <ProFormText
            labelCol={{ span: 8 }}
            width="lg"
            name="couponPrice"
            label="商城净值"
            placeholder="couponPrice"
          />
          {/* <ProFormDigit
            min={1}
            labelCol={{ span: 8 }}
            width="lg"
            name="couponPrice"
            label="商城净值"
            fieldProps={{ precision: 0 }}
            placeholder="couponPrice"
            rules={[{ required: true, message: '不得为空' }]}
          /> */}
          <ProFormText
            labelCol={{ span: 8 }}
            width={700}
            name="pictureUrl"
            label="图片URL"
            placeholder="pictureUrl"
          />
          {/* 占位 */}
          <div style={{ width: 500 }} />
          <ProFormText
            labelCol={{ span: 8 }}
            width={700}
            // width="lg"
            name="forwardUrl"
            label="券跳转地址"
            placeholder="forwardUrl"
          />
          {/* 占位 */}
          <div style={{ width: 500 }} />
          <ProFormDependency name={['brandName']}>
            {({ brandName }) => {
              if (formValue && formValue?.brandName === 'KFC') {
                return (
                  <ProFormTextArea
                    labelCol={{ span: 8 }}
                    width={700}
                    name="activityDesc"
                    label="券面描述"
                    placeholder="activityDesc"
                    fieldProps={{
                      autoSize: {
                        minRows: 4,
                        maxRows: 6,
                      },
                    }}
                  />
                );
              }
              return (
                <ProFormItem labelCol={{ span: 8 }} name="activityDesc" label="券面描述">
                  <Editor />
                </ProFormItem>
              );
            }}
          </ProFormDependency>

          {/* <Form.Item
          label="商品详情"
          name="productDescription"
          extra="图片支持.jpg,.png格式"
          rules={[{ required: true, message: '请输入商品详情', validateTrigger: 'onBlur' }]}
        >
          <Editor />
        </Form.Item> */}
        </ProForm.Group>
      </div>
    </Config.Group>
  );
};

export default MemberInfo;
